body{
  margin: 0;
  font-family: cursive;
}
.container a{
  text-decoration: none;
}
/* Set the width and height of the scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track (the area behind the thumb) */
::-webkit-scrollbar-track {
  background-color: rgb(242, 242, 242, 0.3);
}

/* Handle (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
  background-color:darkred;
  border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: red;
  box-shadow: 0 0 10px  rgba(85, 85, 85, 0.8);
}

.container-main {
    display: grid;
    grid-template-rows: 10% 5% 75% 10%;
    height: 1300px; 
}
#bgVid {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: hue-rotate(90deg);
}
  
.header {
    text-align: center;
    font-size:1.5rem;
    backface-visibility: visible;
    color: white;
    backdrop-filter: grayscale(1);
    text-shadow: 5px 5px 4px black;
}
  
.navbar {
    backface-visibility: visible;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0);
}  
.nav-links a {
    text-decoration: none;
    color: white;
    padding: 15px 20px;
    transition: color 0.3s ease-in-out;
    text-shadow: 5px 5px 4px #000000;
}

.nav-links a:hover {
    color:#008080;
}

.activeNav{
    border-bottom: 3px solid white;
}
.activeNav:hover{
    background-color: #008080;
    color:#6a091c;
    border-bottom: 3px dashed #6a091c;
}
  .nav-links{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.5rem;
  }
  
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2em;
    padding: 2em;
    grid-auto-rows: 1fr;
  }
  
  .clip2{
    margin: 0;
    padding: 0;
    z-index: 1;
    display: inline-block;
    text-align: center;
    position: relative;
    top:12rem;
  }
  .clip {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    
  }
  
  .txt1, .txt2, .txt3, .txt4, .txt5, .txt6, .txt7, .txt8, .txt9{
    display: inline-block;
  }
  .container h1{
    background-color: rgba(0, 128, 128, 0.5);
    border-radius: 30px;
    padding-left: 1rem;
    padding-right: 1rem;
    text-shadow: 3px 3px 3px #000000;
    color:#6a091c;
  }
  .container h1:hover{
    color:rgba(0, 128, 128, 0.5);
    background-color: #6a091c;
  }
  .t1{
    z-index: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
    
  }
  
  .t1:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t2:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t3:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t4:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t5:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t6:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t7:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t8:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .t9:hover .thumb{
    filter: brightness(0.7);
    border-radius: 40px;
  }
  .txt1{
    z-index: 1;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .t2{
    z-index: 0;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt2{
    z-index: 1;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
  .t3{
    z-index: 0;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt3{
    z-index: 1;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }
  .t4{
    z-index: 0;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt4{
    z-index: 1;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  .t5{
    z-index: 0;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt5{
    z-index: 1;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }
  .t6{
    z-index: 0;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt6{
    z-index: 1;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
  }
  .t7{
    z-index: 0;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt7{
    z-index: 1;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
  .t8{
    z-index: 0;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt8{
    z-index: 1;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
  }
  .t9{
    z-index: 0;
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    filter: brightness(1);
    transition: filter 0.6s ease-in;
  }
  .txt9{
    z-index: 1;
    grid-row: 3 / 4;
    grid-column: 3 / 4;
  }
  .txt1, .txt2, .txt3, .txt4, .txt5, .txt6,.txt7, .txt8, .txt9{
    display: inline-block;
  }
  .thumb {
    max-width: 100%;
    max-height: 100%;
    filter:drop-shadow(10px 10px 4px black);
    border-radius: 30px;
    transition: border-radius 0.3s ease-in;
  }
  .footer {
    text-align: center;
    background-color: rgba(128, 128, 128, 0.5)
  }

  @media only screen and (max-width: 1400px) and (min-width: 1300px) {
    .container {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      padding: 0.5rem;
      gap: 0.5rem;
    }
    .container-main {
      grid-template-rows: 15% 4% 86% 5%;
      height: 950px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 1300px) and (min-width: 1200px){
    .container {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      padding: 0.5rem;
      gap: 0.5rem;
    }
    .container-main {
      grid-template-rows: 13% 4% 81% 5%;
      height: 1000px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 1200px) and (min-width: 1100px){
    .container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 2rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
    .txt2{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
    .t3{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }
    .txt4{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }
    .t5{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
    }
    .txt6{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
    }
    .t7{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
    }
    .txt8{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
    }
    .t9{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 7% 3% 87% 3%;
      height: 2000px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 1100px) and (min-width: 1000px){
    .container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
    .txt2{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
    .t3{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }
    .txt4{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }
    .t5{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
    }
    .txt6{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
    }
    .t7{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
    }
    .txt8{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
    }
    .t9{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 7% 3% 87% 3%;
      height: 1800px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 1000px) and (min-width: 900px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 4% 1% 91% 2%;
      height: 5650px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 900px) and (min-width: 800px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 4% 1% 91% 2%;
      height: 5080px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 800px) and (min-width: 700px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 4% 3% 91% 2%;
      height: 4520px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.5rem;
    }
  }
  @media only screen and (max-width: 700px) and (min-width: 600px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 5% 2% 91% 2%;
      height: 3950px;
    }
    .header {
      font-size: 1.8rem;
    }
    .nav-links {
      font-size: 1.3rem;
    }
  }
  
  @media only screen and (max-width: 600px) and (min-width: 500px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 5% 2% 91% 2%;
      height: 3400px;
    }
    .header {
      font-size: 1.5rem;
    }
    .nav-links {
      font-size: 1.2rem;
    }
  }
  @media only screen and (max-width: 500px) and (min-width: 400px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 5% 2% 90% 3%;
      height: 2880px;
    }
    .header {
      font-size: 1.5rem;
    }
    .nav-links {
      font-size: 1.2rem;
    }
  }
  @media only screen and (max-width: 400px) and (min-width: 300px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 5% 2% 90% 3%;
      height: 2310px;
    }
    .header {
      font-size: 1rem;
    }
    .nav-links {
      font-size: 1rem;
    }
  }
  @media only screen and (max-width: 300px) and (min-width: 200px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.4rem;
      gap: 0.4rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 7% 2% 88% 3%;
      height: 1770px;
    }
    .header {
      font-size: 1rem;
    }
    .nav-links {
      font-size: 1rem;
    }
  }
  @media only screen and (max-width: 200px) and (min-width: 100px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.3rem;
      gap: 0.3rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 8% 3% 84% 5%;
      height: 1570px;
    }
    .header {
      font-size: 1rem;
    }
    .nav-links {
      font-size: 1rem;
    }
  }
  @media only screen and (max-width: 100px) and (min-width: 0px){
    .container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9, 1fr);;
      grid-auto-rows: 1fr;
      padding: 0.2rem;
      gap: 0.2rem;
    }
    .t1{
      z-index: 0;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .txt1{
      z-index: 1;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }
    .t2{
      z-index: 0;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .txt2{
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }
    .t3{
      z-index: 0;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .txt3{
      z-index: 1;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
    }
    .t4{
      z-index: 0;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .txt4{
      z-index: 1;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
    }
    .t5{
      z-index: 0;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .txt5{
      z-index: 1;
      grid-row: 5 / 6;
      grid-column: 1 / 2;
    }
    .t6{
      z-index: 0;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .txt6{
      z-index: 1;
      grid-row: 6 / 7;
      grid-column: 1 / 2;
    }
    .t7{
      z-index: 0;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .txt7{
      z-index: 1;
      grid-row: 7 / 8;
      grid-column: 1 / 2;
    }
    .t8{
      z-index: 0;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .txt8{
      z-index: 1;
      grid-row: 8 / 9;
      grid-column: 1 / 2;
    }
    .t9{
      z-index: 0;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .txt9{
      z-index: 1;
      grid-row: 9 / 10;
      grid-column: 1 / 2;
    }
    .container-main {
      grid-template-rows: 8% 2% 85% 4%;
      height: 1570px;
    }
    .header {
      font-size: 1rem;
    }
    .nav-links {
      font-size: 1rem;
    }
  }